Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] dynamiczne tworzenie i usuwanie <div> za pomocą jQuery
followc
post
Post #1





Grupa: Zarejestrowani
Postów: 179
Pomógł: 0
Dołączył: 30.12.2013
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


witam,

próbuję stworzyć kod, który po kliknięciu w przycisk będzie wyświetlał okienko z danymi. Po wyświetleniu kliknięcie w to okienko ma je zamykać... i to wszystko udało mi się zrobić, tyle że ponowne kliknięcie w przycisk już okienka nie wyświetla.

  1. var czy_okno = 1;
  2. jQuery('.podpowiedz').click(function(){
  3.  
  4. if(czy_okno == 0){
  5. }else{
  6. var tresc_podpowiedzi = jQuery(this).find('.tresc_podpowiedzi').html();
  7.  
  8. var okno_podpowiedzi = jQuery('<div class="okno_podpowiedzi"></div>');
  9. jQuery(this).append(okno_podpowiedzi);
  10. czy_okno = 0;
  11. }
  12. });
  13. jQuery('.podpowiedz').on('click','div.okno_podpowiedzi',function(){
  14. jQuery('.okno_podpowiedzi').fadeOut(300).remove();
  15. czy_okno = 1;
  16.  
  17. });


Zmienną czy_okno dodałem, ponieważ bez niej wciąż dopisywane były tyllko kolejne okna bez ich usuwania. Wygada na to, że mój problem polega na działaniu funkcji .on() , której nie dokońca potrafię skontrolować. Wszelkie podpowiedzi mile widziane.
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #2





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


A nie lepiej po prostu mieć to okno jako ukryte w źródle i pokazywać/ukrywać je na żądanie?
Go to the top of the page
+Quote Post
followc
post
Post #3





Grupa: Zarejestrowani
Postów: 179
Pomógł: 0
Dołączył: 30.12.2013
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


Na pewno dużo łatwiej, chciałem/chcę jednak się czegoś nauczyć.
Go to the top of the page
+Quote Post
viking
post
Post #4





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Tak na szybko:
  1. $(function() {
  2. $('.podpowiedz').on('click', function(e){
  3. e.preventDefault();
  4. if ($('.okno_podpowiedzi').length) return;
  5. var tresc_podpowiedzi = $('.tresc_podpowiedzi').html();
  6. var okno_podpowiedzi = $('<div/>', {
  7. text: tresc_podpowiedzi,
  8. 'class': 'okno_podpowiedzi'
  9. }).on('click', function(e){
  10. $(this).remove();
  11. });
  12. $(okno_podpowiedzi).insertAfter(this);
  13. });
  14. });
  15.  
  16. <div class="tresc_podpowiedzi">ksjdfhksjd hfks hdfks hdkjf hsk</div>
  17.  
  18. <btn class="podpowiedz">klik</btn>


Ten post edytował viking 5.11.2016, 14:00:06


--------------------
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #5





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Nie tylko łatwiej, ale też lepiej.

Twój temat to jest problem z serii: "jak zrobić coś w miarę złożonego przy małej wiedzy"? Tak naprawdę to wymaga dyskusji krok po kroku, bo w Twoim kodzie jest wiele problemów różnej natury. Co proponujesz?
Go to the top of the page
+Quote Post
followc
post
Post #6





Grupa: Zarejestrowani
Postów: 179
Pomógł: 0
Dołączył: 30.12.2013
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


No dobra, wiele z tego co stworzył Viking nie do końca do mnie dociera, ale wiem przynajmniej czego google będzie dla mnie szukało w ciągu najbliższych chwil... dzięki
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #7





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


followc zauważyłeś wiadomość prywatną? biggrin.gif
Go to the top of the page
+Quote Post
viking
post
Post #8





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Filozofii wielkiej tam nie ma. preventDefault zapobiega wykonaniu domyślnej akcji elementu (np submit formularza). Zrób sobie console.log(e) gdzieś poniżej. Eventy opisywałem tutaj. Tworząc nowy element przez jquery możesz podać html i atrybuty jako obiekt co zrobiłem (bardziej czytelne moim zdaniem to jest niż wklejanie całego ciągu html). Dla wielu elementów będziesz mógł znaleźć aktywne okno przez $(this).find(...)


--------------------
Go to the top of the page
+Quote Post
followc
post
Post #9





Grupa: Zarejestrowani
Postów: 179
Pomógł: 0
Dołączył: 30.12.2013
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


Tak, po krótkiej analizie krok po kroku szybko się rozjaśniło. Tak, $(this).find(...), jest konieczne bo elementów będzie kilkanaście i stąd ten kawałek kodu, w której samej treści jeszcze nie dokładałem do okienka, bo akurat tym zająć się potrafiłem. Chodziło mi o poprawne rozwiązanie kwesti pojawiania się i znikania samego okna, co dzięki Waszej pomocy mi się udało.

Na pewno też będę częstym gościem prophp.pl

Dzięki wielkie!
Go to the top of the page
+Quote Post
SmokAnalog
post
Post #10





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


No nie wiem czy dobrym pomysłem jest bycie gościem na platformie, której najnowsze newsy to "PHP 5.4 już dostępne" i "Firefox 10 oficjalnie wydany".
Go to the top of the page
+Quote Post
viking
post
Post #11





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Newsów przyznam że dawno nie pisałem tongue.gif A przepisując jakiś czas temu platformę zostawiłem w celach archiwalnych. Z reszty artykułów i "pytań" można się sporo dowiedzieć.


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.08.2025 - 08:18